<template>
  <view class="container">
    <!-- 顶部标题 -->
    <view class="header">分级阅读</view>
    
    <!-- 书籍列表 -->
    <u-list
      class="book-list"
      :height="listHeight"
      @scroll="scroll"
      border
    >
      <u-list-item
        v-for="(book, index) in books"
        :key="index"
      >
        <view
          class="book-item"
          hover-class="u-hover-class"
          @click="viewBook(book)"
        >
          <!-- 书籍封面 -->
          <image
            class="book-cover"
            :src="book.cover"
            mode="aspectFill"
          />
          
          <!-- 书籍信息 -->
          <view class="book-info">
            <text class="book-title">{{ book.title }}</text>
            <text class="book-desc">{{ book.desc }}</text>
          </view>
          
          <!-- 查看按钮 -->
          <u-button
            class="view-btn"
            size="mini"
            type="primary"
            text="查看"
            @click.stop="viewBook(book)"
          />
        </view>
      </u-list-item>
    </u-list>
    
    <!-- 底部导航栏 -->
    <u-tabbar
      class="bottom-nav"
      :list="tabbarList"
      :current="currentTab"
      @change="tabChange"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 书籍数据
      books: [
        { cover: '/static/book1.jpg', title: '学语文魔法拼音王国', desc: '1125人已收藏' },
        { cover: '/static/book2.jpg', title: '学语文魔法拼音王国', desc: '1125人已收藏' },
        { cover: '/static/book3.jpg', title: '学语文魔法拼音王国', desc: '1125人已收藏' },
        { cover: '/static/book4.jpg', title: '学语文魔法拼音王国', desc: '1125人已收藏' },
        { cover: '/static/book5.jpg', title: '学语文魔法拼音王国', desc: '1125人已收藏' }
      ],
      // 底部导航栏数据
      tabbarList: [
        {
          iconPath: '/static/tabbar/study.png',
          selectedIconPath: '/static/tabbar/study-active.png',
          text: '学习',
          pagePath: '/pages/study/study'
        },
        {
          iconPath: '/static/tabbar/aiclass.png',
          selectedIconPath: '/static/tabbar/aiclass-active.png',
          text: 'AI课',
          pagePath: '/pages/aiclass/aiclass'
        },
        {
          iconPath: '/static/tabbar/library.png',
          selectedIconPath: '/static/tabbar/library-active.png',
          text: '图书馆',
          pagePath: '/pages/library/library'
        },
        {
          iconPath: '/static/tabbar/person.png',
          selectedIconPath: '/static/tabbar/person-active.png',
          text: '个人中心',
          pagePath: '/pages/person/person'
        }
      ],
      currentTab: 2, // 当前选中底部导航栏的索引
      listHeight: 0 // 列表高度
    };
  },
  onLoad() {
    // 计算列表高度
    this.calcListHeight();
  },
  methods: {
    // 计算列表高度
    calcListHeight() {
      const query = uni.createSelectorQuery().in(this);
      query.select('.header').boundingClientRect();
      query.select('.bottom-nav').boundingClientRect();
      query.exec((res) => {
        const headerHeight = res[0] ? res[0].height : 0;
        const tabBarHeight = res[1] ? res[1].height : 0;
        this.listHeight = uni.getSystemInfoSync().windowHeight - headerHeight - tabBarHeight;
      });
    },
    // 查看书籍详情
    viewBook(book) {
      console.log('查看书籍详情:', book);
      // 这里可以添加跳转到书籍详情页的逻辑
    },
    // 底部导航栏切换
    tabChange(index) {
      const page = this.tabbarList[index].pagePath;
      if (uni.getCurrentPage().route !== page) {
        uni.switchTab({
          url: page
        });
      }
    },
    // 滚动事件
    scroll(e) {
      // 可以在这里处理滚动相关逻辑
    }
  }
};
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100vh;
  background-color: #ffdb7d;
  padding: 0 15px;
  box-sizing: border-box;
}

.header {
  display: flex;
  justify-content: center;
  padding: 20px 0;
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.book-list {
  width: 100%;
  margin-top: 10px;
}

.book-item {
  display: flex;
  padding: 10px; // 减少内边距，缩短高度
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 10px; // 减少外边距，缩短间隔
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.book-cover {
  width: 80px; // 减小封面宽度
  height: 110px; // 减小封面高度
  border-radius: 5px;
  margin-right: 10px; // 减少封面与文字的间距
}

.book-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.book-title {
  font-size: 16px; // 减小字体大小
  color: #1a73e8;
  margin-bottom: 5px;
}

.book-desc {
  font-size: 12px; // 减小字体大小
  color: #666;
}

.view-btn {
  margin-left: 10px;
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>